<template>
  <div class="wrap">
    <div class="inner">
      <div class="section page-info">
        <div class="page-title">商品总况</div>
      </div>

      <!--  -->
      <div class="section flex">
        <div class="page-top">
          <div>{{ form.sellProductNum }}</div>
          <div>在售/上架商品数</div>
        </div>
        <div class="page-top" style="background-color: #f6918c;">
          <div>{{ form.viewProductNum }}</div>
          <div>被访问商品数</div>
        </div>
        <div class="page-top" style="background-color: #8ae5af;">
          <div>{{ form.orderNum }}</div>
          <div>下单商品数</div>
        </div>
        <div class="page-top" style="background-color: #d69cdd;">
          <div>{{ form.noPayNum }}</div>
          <div>支付商品数</div>
        </div>
        <div class="page-top" style="background-color: #9dafdd;">
          <div>{{ form.repurchaseNum }}</div>
          <div>复购商品数</div>
        </div>
        <div class="page-top" style="background-color: #cadc9b;">
          <div>{{ form.rejectNum }}</div>
          <div>退款商品数</div>
        </div>
      </div>
      <div class="section">
        <div class="section-title">热销TOP商品榜单</div>
        <div>
          <el-table :data="TOP_table_data" style="width: 100%">
            <el-table-column type="index" label="" width="50" :index="indexMethod" align="center">
              <!-- <template slot-scope="scope">
                <span>
                  <i class="el-icon-medal-1">
                    {{ indexMethod }}</i>
                </span>
              </template> -->
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="400">
            </el-table-column>
            <el-table-column prop="viewNum" label="访问人数" width="auto" align="center"> </el-table-column>
            <el-table-column prop="payNum" label="支付人数" width="auto" align="center"> </el-table-column>
            <el-table-column prop="sellNum" label="售卖数量" width="auto" align="center"> </el-table-column>
            <el-table-column prop="transformNum" label="访问支付转化率" width="auto" align="center">
              <template slot-scope="scope">
                {{ scope.row.transformNum }}%
              </template></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="section">
        <div style=" display: flex;">
          <div class="section-title">商品详情</div>
          <div class="date-select">
            <div class="date-item" v-for="(item, index) in list_date" :key="index"
              :class="{ active: item.title == select_date.title }" @click="toggle_date(item)">
              {{ item.title }}
            </div>
          </div>
        </div>
        <el-table :data="product_table_data" style="width: 100%">
          <el-table-column label="" width="50" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="title" label="商品名称" width="350"> </el-table-column>
          <el-table-column prop="viewNum" label="浏览量" width="auto" align="center"> </el-table-column>
          <!-- <el-table-column prop="sellNum" label="加购人数" width="auto" align="center"> </el-table-column> -->
          <el-table-column prop="orderNum" label="下单人数" width="auto" align="center"> </el-table-column>
          <el-table-column prop="payNum" label="支付人数" width="auto" align="center"> </el-table-column>
          <el-table-column prop="payTransformNum" label="下单支付转化率" width="auto" align="center">
            <template slot-scope="scope">
              {{ scope.row.payTransformNum }}%
            </template>
          </el-table-column>
          <el-table-column prop="repeatTransformNum" label="复购率" width="auto" align="center">
            <template slot-scope="scope">
              {{ scope.row.repeatTransformNum }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "index",
  components: {},
  data() {
    return {
      form: {

      },
      //日期筛选
      list_date: [
        // {
        //   title: "今天",
        //   date: "",
        // },
        {
          title: "最近7天",
          date: "7",
        },
        {
          title: "最近15天",
          date: "15",
        },
        {
          title: "最近30天",
          date: "30",
        },
      ],
      select_date: { title: "最近7天" },

      TOP_table_data: [],
      product_table_data: [],
    };
  },
  computed: {
  },
  filters: {},
  watch: {},
  created() {
    this.filte_query()
  },
  mounted() {
  },
  methods: {
    filte_query() {
      this.$api({
        url: '/admin_service.php',
        method: 'get',
        data: {
          action: "data_getProductCountInfo",
        }
      }).then(res => {
        if (res.code == 200) {
          this.form = res.data
          this.TOP_table_data = res.data.hotSales
          this.product_table_data = res.data.sevenHotSales
        }
      })
    },
    //趋势日期切换
    toggle_date(item) {
      this.select_date = item;
      this.$api({
        url: '/admin_service.php',
        method: 'get',
        data: {
          action: "data_getProductCountInfo",
        }
      }).then(res => {
        if (res.code == 200) {
          if (item.date == 7) {
            this.product_table_data = res.data.sevenHotSales
          } else if (item.date == 15) {
            this.product_table_data = res.data.fifteenHotSales
          } else if (item.date == 30) {
            this.product_table_data = res.data.thirtyHotSales
          }
        }
      })
    },

    indexMethod(index) {
      return index + 1;
    }
  },
};
</script>

<style scoped lang="less">
/deep/ .el-table table {
  width: 100% !important;

  thead {
    th.el-table__cell {
      background: #e7e7e7;
      color: #000;
      // font-weight: bold;
    }
  }
}

.inner {
  padding: 0;
  text-align: left;

  .page-info {
    text-align: left;
    background: #fff;

    .page-title {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .page-top {
    width: 30%;
    min-width: 198px;
    padding: 20px 20px 20px 30px;
    border-radius: 5px;
    background-color: #80ccec;
    margin-right: 20px;
    color: #fff;

    div:nth-child(1) {
      font-size: 20px;
      margin-bottom: 5px;
    }
  }

  .section {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
  }

  .section-title {
    .flex-between();
    text-align: left;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;

    .section-right {
      .flex();
      color: @theme;
      font-weight: normal;
      font-size: 12px;
      cursor: pointer;
    }
  }

  .date-select {
    margin-left: 50px;
    .flex();
    margin-bottom: 20px;

    .date-item {
      min-width: 70px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      padding: 0 20px;
      cursor: pointer;
      transition: 0.3s;
      border: 1px solid #eee;
      margin-right: 20px;
      font-size: 12px;

      &:hover {
        background: #eee;
      }

      &.active {
        background: #4da7fd;
        color: #fff;
      }
    }
  }
}

// 访客信息
.vistor-table {
  margin-top: 20px;

  .vistor-table-item {
    display: flex;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #333;

    &.vistor-table-title {
      background: #e7e7e7;
      font-weight: bold;
    }

    &>div {
      padding: 0 10px;
    }

    .vistor-label {
      flex: 2;
    }

    .vistor-value {
      width: 150px;
    }
  }
}
</style>
